import React, { Component } from 'react'
import indexCss from './index.module.scss'

// 1.引入 react-redux中 连接 当前组件和store的对象 connect
import { connect } from 'react-redux'
// // 4.1 引入actionCreator中的获取名字的方法
// import { getCityNameCreate } from '../../store/actionCreator'

// 高阶组件  增强组件功能的     ---解决点击 广州 不能进行路由跳转的bug
import { withRouter } from "react-router-dom"

export class Index extends Component {

    componentDidMount() {
        // this.props.getCityName();
        // 获取城市名称
        console.log(this.props.cityName);
    }

    // 跳转到城市选择列表页
    goToCitylist = () => {
        // console.log(this.props.history);
        // this.props.history.push('../../pages/cityList/index')  🚩错误写法，因为根组件中已配置好路由
        this.props.history.push('/cityList')
    }
    // 跳转到 地图找房页
    goToMapFound = () => {
        this.props.history.push('/mapFound')
    }

    render() {
        return (
            <div className={indexCss.city_search}>
                <div className={indexCss.city_search_form}>
                    {/* 定位城市名称 */}
                    <span className={indexCss.city_search_form_label} onClick={this.goToCitylist}>
                        {this.props.cityName}
                        <i className={"iconfont icon-arrow  " + indexCss.icon_arrow}></i>
                    </span>
                    <div className={indexCss.city_search_form_input}>
                        <i className={"iconfont icon-seach"}></i>
                        <span>请输入小区或地址</span>
                    </div>
                </div>
                {/* 定位图标 */}
                {/* 图标样式 方法一： */}
                {/* <i className={"iconfont icon-map  " + indexCss.iconmap}></i> */}
                <div className={indexCss.city_search_iconmap} onClick={this.goToMapFound}>
                    {/* 方法二 */}
                    <i className={"iconfont icon-map"}></i>
                </div>
            </div>
        )
    }
}

// 2.映射对象 将仓库(store)中的数据映射到  当前组件的属性(props)中
const mapStateToProps = (state) => ({
    //自定义属性名: state.仓库管理员名称.state中的属性
    cityName: state.mapReducer.cityName
})

// 4.2 把action 操作数据的方法也映射出去(将行为action 连接到store和 当前组件中)
// const mapDispatchToProps = (dispatch) => ({
//     getCityName() {
//         // 派发行为:派发通知给管理员 (会将action 派发到 reducer中)
//         dispatch(getCityNameCreate());
//     }
// })

// 3.用connect方法 将store中的数据通过props的方式传递到 当前组件
// export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Index));
export default withRouter(connect(mapStateToProps)(Index));
